<template>
  <div class="product-list">
    <div
      v-for="product in props.products"
      :key="product.id"
      class="product-item"
    >
      <img
        :src="getCover(product.flower)"
        :alt="product.flower.name"
        class="product-cover"
      />
      <div class="flex flex-1 flex-col justify-between px-2">
        <div class="">{{ product.flower.name }}</div>
        <div>
          <div class="text-red-400 text-right">
            {{ "￥" + product.flower.price }}
          </div>
          <div class="text-gray-400 text-right">
            {{ "x" + product.quantity }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Flower } from "types/flower";
import type { OrderItem } from "types/order";
import { PropType } from "vue";

const SERVER_URL = import.meta.env.VITE_SERVER_URL;

const props = defineProps({
  products: {
    type: Array as PropType<OrderItem[]>,
    default: () => []
  }
});

const getCover = (flower: Flower) => {
  if (flower.images && flower.images.length > 0) {
    return SERVER_URL + flower.images[0];
  }

  return "/images/flower.png";
};
</script>

<style scoped lang="scss">
.product-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .product-item {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: calc(50% - 8px);
    display: flex;
    overflow: hidden;

    .product-cover {
      width: 120px;
      height: 120px;
      display: block;
      flex-shrink: 0;
    }
  }
}
</style>
